import React from "react";
import GoBack from "@/components/TheGoBack";
import TheImage from "@/components/TheImage";
import TheTable from "@/components/TheTable";
import "../../style/style.less";
import { apiGetGoodsUpdateLogView } from "@/request/system/goodsLog";
import _ from 'lodash'
import { Space } from "antd";


class Detail extends React.Component {
  state = {
    goodsType: '',
    basicData: [],
    columns: [],
    dataSource: [],
    productTxt: '',
    specificationsDetailed: [],
    specificationsColumns: [
      {
        title: '参数项',
        dataIndex: 'specificationsName'
      },
      {
        title: '值',
        dataIndex: 'specificationsValue'
      }
    ]
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { productId } = this.props.match.params
    let res = await apiGetGoodsUpdateLogView({ id: productId })
    if (res.code === 0 && res.data) {
      // const { goodsInfo, specificationsDetailed } = res.data
      const skuInfo = JSON.parse(res.data.requestParam).skuInfoJson
      // console.log(skuInfo)
      this.state.goodsType = res.data.goodsType
      let basicData = [
        {
          value: res.data.classifyName,
          text: "商品分类",
        },
        {
          value: res.data.goodsName,
          text: "商品名称",
        },
        {
          value: <React.$Price price={res.data.originalPrice || ''} color="#7F7F7F" />,
          text: "商品原价",
        },
        {
          value: <React.$Price price={res.data.currentPrice || ''} color="#7F7F7F" />,
          text: "商品现价",
        },
        {
          value: (
            <Space>
              {
                res.data.showImages.split(',').map(v => {
                  return <TheImage
                    width={80}
                    height={80}
                    src={v}
                  />
                })
              }
            </Space>
          ),
          text: "商品图片",
        },
      ]

      let dataSource = skuInfo.map((v, i) => {
        let obj = {}
        v.skuAttribute.forEach((j, k) => {
          obj[k] = j.value
        })
        obj.materialId = v.materialId
        obj.skuOriginalPrice = <React.$Price price={v.skuOriginalPrice} />
        obj.skuCurrentPrice = <React.$Price price={v.skuCurrentPrice} />
        // obj.stock = parseInt(v.stock).toLocaleString()
        obj.skuIntegral = parseInt(v.skuIntegral).toLocaleString()
        obj.skuWeight = `${v.skuWeight/1000}kg`
        // obj.skuWeight = `${React.$transNum(v.skuWeight, -1, -3)}kg`
        obj.propCodeArray = v.propCodeArray
        obj.skuDescription = v.skuDescription
        obj.imageFile = <TheImage src={v.imageFile} width={80} height={80} />
        return obj
      })
      let columns = []
      _.forEach(skuInfo[0].skuAttribute, (v, i) => {
        columns.push({
          title: v.key,
          dataIndex: i,
          key: i
        })
      })
      columns = columns.concat([
        {
          title: '物料ID',
          dataIndex: 'materialId',
          key: 'materialId',
        },
        {
          title: '原价',
          dataIndex: 'skuOriginalPrice',
          key: 'skuOriginalPrice'
        },
        {
          title: '现价',
          dataIndex: 'skuCurrentPrice',
          key: 'skuCurrentPrice'
        },
        // {
        //   title: '库存',
        //   dataIndex: 'stock',
        //   key: 'stock'
        // },

        {
          title: '图片',
          dataIndex: 'imageFile',
          key: 'imageFile'
        }
      ])
      if (res.data.goodsType == 1){ //商城
        basicData.splice(1,0,{
          value: res.data.brandName,
          text: "商品品牌",
        })
        columns.splice(-1,0, {
          title: '重量',
          dataIndex: 'skuWeight',
          key: 'skuWeight'
        },{
          title: '描述',
          dataIndex: 'skuDescription',
          key: 'skuDescription',
        })
      }
      else if (res.data.goodsType == 2){ //门店
        columns.splice(-1,0,{
          title: '编码',
          dataIndex: 'propCodeArray',
          key: 'propCodeArray'
        })
      }
      this.setState({
        columns,
        dataSource,
        basicData,
        productTxt: res.data.productTxt,
        // specificationsDetailed,
        freightTemplateName: res.data.freightTemplateName
      })
    }
  }
  render() {
    const { basicData, columns, dataSource, productTxt, specificationsDetailed, specificationsColumns, freightTemplateName,goodsType } = this.state;
    return (
      <div className="commodity-list-detail p-layout-box">
        <GoBack history={this.props.history} title={"商品详情"} />
        <div className="detail-content">
          <div className="commodity-card">
            <div className="title">基本信息</div>
            <div className="content basic">
              {basicData.map((v, i) => {
                return (
                  <div>
                    <p>{v.text}:</p>
                    <div>{v.value}</div>
                  </div>
                );
              })}
            </div>
          </div>
          {
            goodsType == 1 ? <div className="commodity-card">
              <div className="title">交易信息</div>
              <div className="content basic">
                <div>
                  <p>运费模板:</p>
                  <div>{freightTemplateName}</div>
                </div>
              </div>
            </div>: []
          }
          <div className="commodity-card">
            <div className="title">商品规格信息</div>
            <div className="content">
              <TheTable columns={columns} dataSource={dataSource} />
            </div>
          </div>
          <div className="commodity-card">
            <div className="title">商品详情</div>
            <div className="content">
              <div style={{ overflowX: 'auto' }} dangerouslySetInnerHTML={{ __html: productTxt }} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Detail;
